<template>
  <el-form
    size="small"
    label-width="90px"
    labelPosition="left"
  >
    <template v-if="activeData.config">
      <template v-if="!activeData.config.isSubTable">
        <el-form-item label="控件栅格">
          <el-slider
            v-model="activeData.config.span"
            :max="24"
            :min="6"
            show-stops
            :step="2"
            show-tooltip
          />
        </el-form-item>
        <el-form-item
          label="标题宽度"
          v-if="
            ![
              'divider',
              'pfText',
              'link',
              'alert',
              'button',
              'table',
              'groupTitle ',
              'card',
              'row',
              'tab',
              'collapse',
            ].includes(activeData.config.pfKey)
          "
        >
          <el-input-number
            v-model="activeData.config.labelWidth"
            placeholder="标题宽度"
            :min="0"
            :precision="0"
            controls-position="right"
          />
        </el-form-item>
      </template>
      <pfformtipitem
        tip-label="支持%和px两种宽度设置"
        label="控件宽度"
        v-if="
          !activeData.config.isSubTable &&
          !noWithList.includes(activeData.config.pfKey) &&
          showType === 'pc' &&
          activeData.style
        "
      >
        <el-input v-model="activeData.style.width" placeholder="控件宽度" />
      </pfformtipitem>
      <el-form-item label="控件宽度" v-if="activeData.config.isSubTable">
        <el-input-number
          v-model="activeData.config.columnWidth"
          placeholder="控件宽度"
          :min="0"
          :precision="0"
          controls-position="right"
        />
      </el-form-item>
      <el-form-item label="控件Class">
        <el-select
          v-model="activeData.config.className"
          multiple
          clearable
          placeholder="请选择"
        >
          <el-option
            v-for="item in formConf.classNames"
            :key="item"
            :label="item"
            :value="item"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="多端显示">
        <el-checkbox-group v-model="activeData.config.visibility" size="mini">
          <el-checkbox label="pc">Web</el-checkbox>
          <el-checkbox label="app">App</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
    </template>
  </el-form>
</template>

<script>
import { mapState } from "vuex";
import pfformtipitem from "./RightComponents/pf-form-tip-item";
const noWithList = ['switch', 'radio', 'checkbox', 'uploadFz', 'uploadImg', 'colorPicker', 'rate', 'link', 'button', 'pfText', 'alert', 'qrcode', 'barcode']
const layoutList = ["groupTitle", 'divider', 'collapse', 'tab', 'row', 'card', 'table']
export default {
  inject: ["getShowType"],
  props: ['formConf'],
  name: 'componentStyle',
  components: {
    pfformtipitem,
  },
  data() {
    return{
      noWithList: [...noWithList, ...layoutList],
    }
  },
  computed: {
    ...mapState("designer", ["activeData"]),
    showType() {
      return this.getShowType();
    },
  },
};
</script>

<style>
</style>